<template>
  <div>
    <van-nav-bar
      title="详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      class="navbar"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img :src="imgBase + data.laptop_pic1" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgBase + data.laptop_pic2" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img :src="imgBase + data.laptop_pic3" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 信息 -->
    <div>
      <div class="xinxi">
        <p>￥{{ data.price }}</p>
        <p>{{ data.title }}</p>
      </div>
      <div class="xl">销量：{{ data.spec }}</div>

      <!-- <div>
        <van-icon name="thumb-circle-o" size="30px" />
        <span>推荐</span>
      </div> -->
    </div>
    <div class="guige">
      <van-cell :value="date" @click="show = true">日期: {{date}}</van-cell>
      <van-calendar v-model="show" @confirm="onConfirm" />
    </div>
    <!-- 商品说明 -->
    <div class="xiangqing">
      <div class="jieshao" v-html="data.details"></div>

      <div class="yuding" v-html="data.reserve"></div>

      <div class="wenxin" v-html="data.prompt"></div>

      <div class="guanyufuwu" v-html="data.preferential"></div>
    </div>
    <div class="kong"></div>
    <!-- 底部栏 -->
    <van-goods-action style="padding: 10px">
      <!-- <van-goods-action-icon icon="home-o" to="/home/index" text="首页" color="#ee0a24" /> -->
      <van-goods-action-icon
        icon="friends-o"
        to="/IndiviDual"
        text="我的收藏"
      />
      <van-goods-action-icon
        :icon="hobby"
        :text="text"
        @click="hobbya"
        color="#ff5000"
      />
      <van-goods-action-button type="danger" text="立即购买" @click="goumai" />
    </van-goods-action>
    <van-popup v-model:show="xzrq" :item="date">请选择购买日期</van-popup>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 轮播图
      show: false,
      // 时间选择
      date: '',
      show: false,
      hobby: "star-o",
      text: "收藏",
      xzrq: false,
      lid: this.$route.query.id,
      data: "",
     date2:''
    };
  },
  computed: {
    ...mapState(["imgBase"]),
  },
  mounted() {
    const url = `/detail?id=${this.lid}`;
    console.log(url);
    this.axios.get(url).then((res) => {
      console.log("res", res.data.result);
      this.data = res.data.result;
    });
  },
  methods: {
    goumai() {
      if (this.date == "") {
        console.log("kong");
        this.xzrq = true;
      } else {
        this.$store.commit("savegouma", this.date);
        this.$router.push({
          name: "zhifu",
          params: {
            id: this.data,
            date2:this.date2
          },
        });
      }
    },
    hobbya() {
      if (this.hobby == "star-o") {
        (this.hobby = "star"),
          (this.text = "已收藏"),
          //发送添加请求
          this.axios
            .post(
              "/shoucang",
              `lid=${this.data.lid}&&price=${this.data.price}&&title=${this.data.title}&&spec=${this.data.spec}&&pic=${this.data.laptop_pic1}&&uname=${this.$store.state.username}`
            )
            .then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                this.$toast({
                  message: "添加收藏成功",
                  icon: "smile-o",
                });
              }
            });
      } else if (this.hobby == "star") {
        (this.hobby = "star-o"),
          (this.text = "收藏"),
          this.axios
            .delete(
              `/del_sc?lid=${this.data.lid}&&uname=${this.$store.state.username}`
            )
            .then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                this.$toast({
                  message: "不爱了呗",
                  icon: "smile-o",
                });
              }
            });
      }
    },
    onClickLeft() {
      history.back(-1);
    },
    // 轮播图
    showPopup() {
      this.show = true;
    },
    // 时间选择
    formatDate(date) {
      let year=date.getFullYear()
      let month=(date.getMonth() + 1).toString().padStart(2,'0')
      let date1=(date.getDate() ).toString().padStart(2,'0')
       let date2=`${year}${month}${date1}`
       this.date2=date2
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
};
</script>
<style src="../assets/css/pro.css" scoped></style>
<style src="../assets/css/main.css"></style>

